<template>
    <div class="nav-part">
        <ul class="nav-ul">
            <li class="nav-li" v-for="item in navData" :key="item.id">
                <router-link to="/Find">
                <i :class="item.icon"></i>
                <p class="title">{{item.text}}</p>
                </router-link>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
        props:{
        navData : {
            type : Array
        }
    }
}
</script>

<style lang="scss" scoped>
    .nav-part {
        width: 90%;
        margin: 1rem auto;
        overflow: hidden;
    }

    .nav-ul {
        display: flex;
        width: 100%;
    }

    .nav-li {
        flex: 1;
        height: 5rem;
        >a {
            color: #000;
            text-decoration: none;
        }
        
        .title {
            width: 100%;
            height: 2rem;
            line-height: 2rem;
            text-align: center;
            font-size: 0.8rem;
        }

        .icon {
            display: block;
            width: 3rem;
            height: 3rem;
            margin: auto;
            line-height: 3rem;
            text-align: center;
            font-size: 1.2rem;
            background: #33CCBB;
            border-radius: 50%;
            color: #fff;
            font-size: 1.5rem;
        }
    }
</style>